<template>
  <div class="login">
    <div class="ocean"></div>
    <el-card class="box-card">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <h3 class="title">车辆大数据分析系统</h3>
        <el-form-item prop="loginname">
          <el-input
            v-model="loginForm.loginname"
            type="text"
            auto-complete="off"
            placeholder="账号"
            prefix-icon="el-icon-user"
          >
            <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            v-model="loginForm.pwd"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
            prefix-icon="el-icon-lock"
          >
            <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
          </el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { loginVerify } from "@/api/user";
import { getAllSalesResult } from "@/api/salesPredict";

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        loginname: "admin",
        pwd: "123456",
      },
      loading: false,
      redirect: undefined,
      loginRules: {
        loginname: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        pwd: [{ required: true, trigger: "blur", message: "密码不能为空" }],
      },
    };
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.codeUrl = res.data.img;
        this.loginForm.uuid = res.data.uuid;

        this.responseInterceptor(res);
      });
    },
    handleLogin() {
      loginVerify(this.loginForm).then((res) => {
        if (res.data.code == 500) {
          // 重新获取验证码
          // this.getCode();
          console.log(res);
          this.$message.error(res.data.msg);
        } else if (res.data.code == 200) {
          // 设置token 和 routes
          this.$store.commit("permission/SET_ROUTES", res.data.data.routes);
          this.$store.commit("permission/SET_TOKEN", res.data.data.token);
          this.$store.commit("permission/SET_USERINFO", res.data.data.userInfo);

          this.loading = true;

          // 存储销量预测结果数据
          this.saveSalePredict();

          setTimeout(() => {
            this.$router.replace("/home");
            this.$message({
              message: "登录成功！",
              type: "success",
            });
          }, 300);

        } else {
          this.getCode();
          this.$message.warning("请重试！");
        }
      });
    },
    saveSalePredict() {
      getAllSalesResult().then((res) => {
        // 生成填充序列
        let unshowData = Array(63).fill("-");
        let salesList = res.data.data;
        // 按照滚动预测得分重新排列
        salesList.sort((a, b) => {
          return b.rollScore - a.rollScore;
        });
        // 进行序列填充
        salesList.forEach((currentItem, index) => {
          currentItem["rollPredRes"].unshift(unshowData);
          currentItem["traditionPredRes"].unshift(unshowData);
          // 拉平
          salesList[index]["rollPredRes"] = currentItem["rollPredRes"].flat();
          salesList[index]["traditionPredRes"] = currentItem["traditionPredRes"].flat();
        });

        localStorage.setItem("salesList", JSON.stringify(salesList))
      });
    },
  },
  mounted() {
    this.$store.commit("permission/REMOVE_TOKEN");
    this.$store.commit("permission/REMOVE_USERINFO");
    // this.getCode();
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/bg.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-card {
  width: 400px;
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  height: 38px;
}

html,
body {
  height: 100%;
}

body {
  background: radial-gradient(
    ellipse at center,
    #fffeea 0%,
    #fffeea 35%,
    #b7e8eb 100%
  );
  overflow: hidden;
}
</style>
